<template>
  <div class="wrapper">
    <div>
      <nut-textinput v-model="patientCount" placeholder="病人数量" :clearBtn="true" :disabled="false" />
    </div>
    <div>
      <div @click="switchDLActionSheet" class="addBottomBorder">
        <span class="title">
          <label>病情等级</label>
        </span>
        <span class="selected-option">{{this.diseaseLevel}}</span>
      </div>
      <nut-actionsheet
        :is-visible="isVisibleDL"
        @close="switchDLActionSheet"
        :menu-items="DLMenuItems"
        @choose="chooseDLItem"
        cancelTxt="取消"
      ></nut-actionsheet>
    </div>
    <div>
      <div @click="switchTHActionSheet" class="addBottomBorder">
        <span class="title">
          <label>送往医院</label>
        </span>
        <span class="selected-option">{{this.toHospital}}</span>
      </div>
      <nut-actionsheet
        :is-visible="isVisibleTH"
        @close="switchTHActionSheet"
        :menu-items="THMenuItems"
        @choose="chooseTHItem"
        cancelTxt="取消"
      ></nut-actionsheet>
    </div>
  </div>
</template>

<script>
export default {
  name: "PatientForm",
  data() {
    return {
      patientCount: "",
      diseaseLevel: "",
      toHospital: "",
      isVisibleDL: false,
      DLMenuItems: [],
      isVisibleTH: false,
      THMenuItems: []
    };
  },
  methods: {
    switchDLActionSheet() {
      this.isVisibleDL = !this.isVisibleDL;
    },

    chooseDLItem(itemParams) {
      this.diseaseLevel = itemParams.name;
    },
    switchTHActionSheet() {
      this.isVisibleTH = !this.isVisibleTH;
    },
    chooseTHItem(itemParams) {
      this.toHospital = itemParams.name;
    },
    clearData() {
      this.patientCount = "";
      this.diseaseLevel = "";
      this.toHospital = "";
    }
  },
  mounted() {
    this.$axios({
      url: "/api/Dictionary/GetDiseaseLevel",
      method: "get",
      params: {
        isSelect: 0
      }
    }).then(res => {
      var obj = JSON.parse(res.data);
      if (obj.ret) {
        this.DLMenuItems = obj.data;
      } else {
        this.$toast.fail(obj.res);
      }
    });
    this.$axios({
      url: "/api/Dictionary/GetHospitalList",
      method: "get",
      params: {
        isSelect: 0
      }
    }).then(res => {
      var obj = JSON.parse(res.data);
      if (obj.ret) {
        this.THMenuItems = obj.data;
      } else {
        this.$toast.fail(obj.res);
      }
    });
  }
};
</script>

<style lang="less" scoped>
.wrapper > div {
  margin: 15px 10px;
}
.title {
  float: left;
}
.selected-option {
  float: right;
}
.addBottomBorder {
  overflow: hidden;
  border-bottom: 1px solid #eee;
  padding: 10px 0;
}
</style>
